<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>记录个人账单</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<h1>所有消费</h1>
<button onclick="search()">查询所有</button>
<div id="app">
    {{ message }}
    <button @click="search()">点击</button>
    <ol>
        <li v-for="data in dataList">
            {{ data.thing }}
        </li>
    </ol>
    请输入今天做的事情:<input>
    请输入今天花的钱:<input>
    <button>提交</button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            dataList: [{thing:'hahaha'}]
        },
        methods:{
            search(){
                var that=this;
                console.log(that)
                $.ajax({
                    type:'get',
                    url:'account/findAllAccount',
                    success:function(data) {
                        console.log(this)
                        console.log(data)
                        that.dataList=data
                        console.log(that.message)
                    }
                });
            }
        }
    })
</script>
</body>
</html>